<template>
	<div class="search-div">
		<div class="tools-div">
			<el-button type="success" size="small" @click="addShow(0)">
				添 加
			</el-button>
		</div>

		<!-- data: 当前表格绑定的集合 -->
		<!-- row-key： 指定每一行的唯一键（id），每行数据的id属性作为唯一键 -->
		<!-- default-expand-all ： 表格是否默认展开 -->
		
		<el-table
			:data="menuList"
			style="width: 100%; margin-bottom: 20px"
			row-key="id"
			border
		>
			<el-table-column prop="title" label="菜单名称" sortable />
			<el-table-column prop="component" label="组件名称" sortable />
			<el-table-column label="菜单状态" sortable #default="scope">
				{{ scope.row.status == 0 ? '禁用' : '正常' }}
			</el-table-column>

			<el-table-column label="操作" #default="scope">
				<el-button type="success" size="small" @click="addShow(scope.row.id)">
					添加下级菜单
				</el-button>

                <el-button type="warning" size="small" @click="deleteByMenuId(scope.row.id)">
					删除菜单
				</el-button>

                <el-button type="primary" size="small" @click="editShow(scope.row)">
					修改
				</el-button>
			</el-table-column>
		</el-table>
        
		<el-dialog v-model="dialogVisible" title="添加菜单" width="50%">
		
			{{sysMenu}}

			<el-form label-width="70px" size="small">
				<el-form-item label="菜单标题">
					<el-input
						style="width: 50%"
						placeholder="菜单标题"
						v-model="sysMenu.title"
					></el-input>
				</el-form-item>
				<el-form-item label="组件名称">
					<el-input
						style="width: 50%"
						placeholder="组件名称"
						v-model="sysMenu.component"
					></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input
						style="width: 50%"
						placeholder="排序"
						v-model="sysMenu.sortValue"
					></el-input>
				</el-form-item>

				<el-form-item label="状态">
					<el-radio-group v-model="radioStatus">
						<el-radio label="1">正常</el-radio>
						<el-radio label="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-row style="display:flex">
					<el-button type="primary" size="small" @click="submitDialog">
						提交
					</el-button>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'

	import { GetMenuList, AddMenu ,DeleteMenu ,UpdateMenu } from '@/api/sysMenu'

	import { ElMessage, ElMessageBox } from 'element-plus'

	//菜单列表
	let menuList = ref([])

	//加载数据的方法
	let fetchData = async () => {
		let { data } = await GetMenuList()
		menuList.value = data
	}

	//在钩子函数中进行调用
	onMounted(() => {
		fetchData()
	})

	//定义对象用于弹窗控件的绑定
	let sysMenu = ref({
		//json中的属性名可以不用先定义
	})

    //给单选框绑定的
	let radioStatus = ref('0')

	//弹窗是否显示
	let dialogVisible = ref(false)

	//两个添加按钮绑定的方法
	
	let addShow = parentId => {
		dialogVisible.value = true //打开弹窗
		sysMenu.value = {} //变量值清空
		sysMenu.value.parentId = parentId
	}

	//弹窗上的提交按钮（添加和修改是同一个按钮）
	let submitDialog = async () => {
        sysMenu.value.status = radioStatus.value

        let { code, message }  = sysMenu.value.id?await UpdateMenu(sysMenu.value):await AddMenu(sysMenu.value)

        if (code == 200) {
            ElMessage.success(message)
            dialogVisible.value = false
            fetchData()
        } else {
            ElMessage.warning('操作失败，' + message)
        }
	}

    //删除菜单按钮
    let deleteByMenuId = async (menuId)=>{
        //最好加一个确认框
        let {code,message} = await DeleteMenu(menuId)
        if(code==200){
            ElMessage.success("删除成功")
            fetchData()
        }else{
            ElMessage.warning("删除失败，" + message)
        }
    }

    //修改按钮
    let editShow = (row)=>{
        dialogVisible.value = true
        sysMenu.value = row
        radioStatus.value = sysMenu.value.status + '' // 将0或者1 ， 改成字符串 '0'  '1'
    }
</script>

<style scoped>
	.search-div {
		margin-bottom: 10px;
		padding: 10px;
		border: 1px solid #ebeef5;
		border-radius: 3px;
		background-color: #fff;
	}

	.tools-div {
		margin: 10px 0;
		padding: 10px;
		border: 1px solid #ebeef5;
		border-radius: 3px;
		background-color: #fff;
	}
</style>